<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/chessBoard.css">
    <title>五子棋</title>

</head>
<body>
    <div class="game-container">
        <h1>
            <button class="index" id="back">返回</button>
            欢迎来到五子棋对战游戏
        </h1>
        <h6>祝您游戏愉快 百战百胜</h6>

        <div class="game-controls">
            <button class="control-btn" id="black-first">执黑先手</button>
            <button class="control-btn" id="white-second">执白后手</button>
            <button class="control-btn" id="undoButton">悔棋</button>
            <button class="control-btn abandon" id="abandon-game">重置游戏</button>

        </div>

        <div class="options-container">
            <div class="option-group">
                <label for="options-difficult" class="option-label">选择 AI 难度</label>
                <select id="options-difficult" class="option-select">
                    <option value="2">简单</option>
                    <option value="4">一般</option>
                    <option value="8">困难</option>
                </select>
            </div>
            <div class="option-group">
                <label for="options-AI" class="option-label">选择 AI 对手</label>
                <select id="options-AI" class="option-select">
                    <option value="1">极大极小搜索</option>
                    <option value="2">蒙特卡洛</option>
                </select>
            </div>
        </div>


        <div class="game-message" id="game-message">

        </div>
        <div class="result-message" id="result-message"></div>

        <canvas id="canvas" width="640" height="640"></canvas>

    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="../js/ai_vs_player.js"></script>
</body>
</html>